﻿
@{
    ViewBag.Title=BlobInfoResource.BlobInfoFormPageTitle;
    Layout = "~/Views/Shared/_LeftSidebarLayout.cshtml";
}
@section head{
}
@section scripts{
    <script type="text/javascript" src="~/assets/plugins/plupload/plupload.full.min.js"></script>
    <script id="fileTemplate" type="text/x-jquery-tmpl">
        <tr id="tr${id}" data-fileid="${id}">
            <td>${name}</td>
            <td></td>
            <td>${plupload.formatSize(size)}</td>
            <td>
                <button class="btn btn-danger btn-xs" title="@BlobInfoResource.DeleteButtonText" data-fileid="${id}"><i class="fa fa-trash-o"></i></button><i class="fa fa-check-circle fa-lg" style="display:none;" title="@BlobInfoResource.SuccessButtonText"></i><i class="fa fa-exclamation-triangle fa-lg" style="display:none;"></i>
            </td>
        </tr>
    </script>
    <script type="text/javascript">
    // <![CDATA[
    (function ()
    {
        var uploader = null;
        var addFileButtonText = "@BlobInfoResource.AddFileButtonText";
        var totalSize = 0;
        $(document).ready(function ()
        {
            var timeOutMessage = "@BlobInfoResource.TimeOutMessage";
            var uploadedPercentage = 0;
            var btnAdd = document.getElementById("btnAdd");
            var btnStartUpload = document.getElementById("btnStartUpload");
            var btnReset = document.getElementById("btnReset");
            uploader = new plupload.Uploader(
            {
                "runtimes": "html5,silverlight,flash,html4",
                "url": "@Url.Content("~/uploadblobhandler.ashx")",
                "silverlight_xap_url": "@Url.Content("~/assets/plugins/plupload/moxie.xap")", // Silverlight settings
                "flash_swf_url": "@Url.Content("~/assets/plugins/plupload/moxie.swf")", // Flash settings
                "container": document.getElementById("divUpload"),
                "browse_button": "btnAdd",
                "filters": { "max_file_size": "5mb", "mime_types": [{ "title": "@BlobInfoResource.ImageFile", "extensions": "jpg,jpeg,png,gif,bmp" }, { "title": "@BlobInfoResource.ExcelFile", "extensions": "xlsx" }] },
                "multi_selection": true,
                "unique_names": true,
                "init":
                {
                    "PostInit": function ()
                    {
                        btnStartUpload.onclick = function ()
                        {
                            btnAdd.disabled = true;
                            btnStartUpload.disabled = true;
                            uploader.start();
                        };
                    },
                    "FilesAdded": function (up, files)
                    {
                        $(fileTemplate).tmpl(files).appendTo($(tbdUpload));
                        UpdateUploadPanelInfo();
                        $("#tbdUpload>tr>td>button.btn-danger").click(function ()
                        {
                            var selectedRow = this.parentNode.parentNode;
                            var file = uploader.getFile($(this).attr("data-fileid"));
                            uploader.removeFile(file);
                            tbdUpload.removeChild(selectedRow);
                            UpdateUploadPanelInfo();
                        });
                    },
                    "UploadProgress": function (up, file)
                    {
                        // document.getElementById(file.id).getElementsByTagName("b")[0].innerHTML = "<span>" + file.percent + "%</span>";
                    },
                    "FileUploaded": function (upload, file, response)
                    {
                        var uploadedRow = document.getElementById("tr" + file.id);
                        $(uploadedRow).find(".btn-danger").hide();
                        $(uploadedRow).find(".fa-check-circle").show();
                        uploadedPercentage += file.size / totalSize * 100;
                        strUploadedPercentage.innerText = Math.round(uploadedPercentage).toString();
                    },
                    "UploadComplete": function (up, files)
                    {
                        spnAddText.innerText = addFileButtonText;
                        var ajax = $.post("@Url.Content("~/cache/resetblobfilenames")");
                        ajax.done(function (data, textStatus, jqXhr)
                        {
                            // Not implement.
                        });
                        ajax.fail(App.OnRequestFail);
                    },
                    "Error": function (up, err)
                    {
                        var errorRow = document.getElementById("tr" + err.file.id);
                        $(errorRow).find(".btn-danger").hide();
                        $(errorRow).find(".fa-exclamation-triangle").show();
                        switch (err.code)
                        {
                            case -600:
                                Alert("@BlobInfoResource.FileSizeErrorMessage");
                                break;
                            case -200:
                                $(errorRow).find(".fa-exclamation-triangle").attr("title", "@BlobInfoResource.ProcessingErrorMessage");
                                break;
                            default:
                                // window.alert(err.code + " | " + err.message);
                                $(errorRow).find(".fa-exclamation-triangle").attr("title", timeOutMessage);
                        }
                    }
                }
            });
            uploader.init();
            spnAddText.innerText = addFileButtonText;
            strUploadedPercentage.innerText = uploadedPercentage;
            btnReset.onclick=function ()
            {
                var $Rows = $(tbdUpload).find("tr");
                for (var i=0; i<$Rows.size(); i++)
                {
                    var row = $Rows[i];
                    var file = uploader.getFile($(row).attr("data-fileid"));
                    uploader.removeFile(file);
                }
                $(tbdUpload).empty();
                btnAdd.disabled = false;
                uploadedPercentage = 0;
                totalSize = 0;
                strUploadedPercentage.innerText = uploadedPercentage;
                UpdateUploadPanelInfo();
            }
        });
        function Alert(html)
        {
            divAlertBody.innerHTML = html;
            $(divAlert).modal();
        }
        function UpdateUploadPanelInfo()
        {
            if (uploader.files.length==0)
            {
                spnAddText.innerText = addFileButtonText;
                btnStartUpload.disabled = true;
            }
            else
            {
                spnAddText.innerText = uploader.files.length.toString() + " @BlobInfoResource.AddFileButtonText2";
                btnStartUpload.disabled = false;
            }
            plupload.each(uploader.files, function (file)
            {
                totalSize += file.size;
            });
            strTotalSize.innerText = plupload.formatSize(totalSize);
        }
    })();
    // ]]>
    </script>
}
@section breadcrumb{
}
<div id="divUpload" class="panel panel-sea margin-bottom-40">
    <div class="panel-heading">
        <h3 class="panel-title">
            <i class="fa fa-cloud-upload"></i>
            @BlobInfoResource.UploadPanelTitle
        </h3>
    </div>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>@BlobInfoResource.FileNameTitle</th>
                <th>@BlobInfoResource.StatusTitle</th>
                <th>@BlobInfoResource.SizeTitle</th>
                <th></th>
            </tr>
        </thead>
        <tbody id="tbdUpload"></tbody>
        <tfoot>
            <tr>
                <td colspan="2">
                    <button id="btnAdd" type="button" class="btn btn-u btn-u-blue">
                        <i class="fa fa-plus-circle"></i>
                        <span id="spnAddText"></span>
                    </button>
                    <button id="btnStartUpload" type="button" class="btn btn-u btn-u-red" disabled="disabled">
                        <i class="fa fa-upload"></i>
                        @BlobInfoResource.StartUploadButtonText
                    </button>
                    <button id="btnReset" type="button" class="btn btn-u btn-u-default">
                        <i class="fa fa-refresh"></i>
                        @BlobInfoResource.ResetButtonText
                    </button>
                </td>
                <td class="text-right" colspan="2" style="vertical-align:middle;">
                    <strong id="strUploadedPercentage"></strong><strong>%</strong>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <strong id="strTotalSize">0 b</strong>
                </td>
            </tr>
        </tfoot>
    </table>
</div>
<!-- Modal -->
<div id="divAlert" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">@BlobInfoResource.ModalErrorTitle</h4>
            </div>
            <div id="divAlertBody" class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>